<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="jquery-3.7.1.js"></script>
		<link rel="stylesheet" href="bootstrap-4.6.2-dist/css/bootstrap.css" />
		<script src="bootstrap-4.6.2-dist/js/bootstrap.bundle.js"></script>
		<title>学生管理系统</title>
	</head>
	<body>
		<div class="container">
			<h1 style="text-align: center;">学生信息展示</h1>
			<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <h5 class="modal-title" id="exampleModalLabel">新增学生信息</h5>
			        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
			          <span aria-hidden="true">&times;</span>
			        </button>
			      </div>
				  <form id="addStudent">
			      <div class="modal-body">
			          <div class="form-group">
			            <label for="xzsno" class="col-form-label">学号:</label>
			            <input type="text" class="form-control" id="xzsno" required>
			          </div>
			          <div class="form-group">
			            <label for="xzsname" class="col-form-label">姓名:</label>
			            <input type="text" class="form-control" id="xzsname" required>
			          </div>
					  <div class="form-group">
					    <label for="xzsgrade" class="col-form-label">班级:</label>
					    <input type="text" class="form-control" id="xzsgrade" required>
					  </div>
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="closeMsg">关闭</button>
			        <button type="submit" class="btn btn-primary">提交</button>
			      </div>
				  </form>
			    </div>
			  </div>
			</div>
			<form id="querylike">
			  <div class="form-row align-items-center">
			    <div class="col-auto">
			      <label class="sr-only" for="sno">学号</label>
			      <input type="text" class="form-control mb-2" id="sno" placeholder="学号">
			    </div>
			    <div class="col-auto">
			      <label class="sr-only" for="sname">姓名</label>
			      <input type="text" class="form-control mb-2" id="sname" placeholder="姓名">
			    </div>
				<div class="col-auto">
				  <label class="sr-only" for="sgrade">班级</label>
				  <input type="text" class="form-control mb-2" id="sgrade" placeholder="班级">
				</div>
			    <div class="col-auto">
			      <button type="submit" class="btn btn-primary mb-2">查询</button>
			    </div>
				<div class="col-auto">
					<button type="button" class="btn btn-primary mb-2" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">新增学生信息</button>
				</div>
			  </div>
			</form>
			<table class="table">
				<thead>
					<tr>
						<th scope="col">序号</th>
						<th scope="col">学号</th>
						<th scope="col">姓名</th>
						<th scope="col">班级</th>
						<th scope="col">操作</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<th scope="row">1</th>
						<td>Mark</td>
						<td>Otto</td>
						<td>@mdo</td>
					</tr>
					<tr>
						<th scope="row">2</th>
						<td>Jacob</td>
						<td>Thornton</td>
						<td>@fat</td>
					</tr>
					<tr>
						<th scope="row">3</th>
						<td>Larry</td>
						<td>the Bird</td>
						<td>@twitter</td>
					</tr>
				</tbody>
			</table>
		</div>
		<script>
			function queryall(){
				$.ajax({
				url: '/queryall', //目标URL
				type: 'GET',
				// 请求类型，这里是GET
				data: {
					key1: 'value1', // 发送到服务器的数据
					key2: 'value2 '
				},
				dataType:"json",
				success: function(response) {
					//请求成功时的回调函数
					//清空内容
					$("tbody").empty();
					let index = 1;
					for(var i=0;i<response.length;i++){
						let s = "<tr><th scope='row'>"+index+++"</th>";
						s+="<td>"+response[i]["sno"]+"</td>";
						s+="<td>"+response[i]["sname"]+"</td>";
						s+="<td>"+response[i]["sgrade"]+"</td>";
						s+="<td>";
						s+="<button class='btn btn-sm btn-danger delete' sno='"+response[i]["sno"]+"'>删除</button>"
						s+="</td></tr>";
						$("tbody").append(s);
					}
					$(".delete").click(function(e){
						let sno = e.target.getAttribute("sno");
						console.log(sno)
						deletestudent(sno)
					})
					console.log(response);
				},
				error: function(xhr, status, error) {
					//请求失败时的回调函数
					console.error(error);
				}
			});
			}
			$(document).ready(queryall());
			document.querySelector("#querylike").onsubmit = function(e){
				//阻止默认事件
				e.preventDefault();
				let sno = $("#sno").val()
				let sname = $("#sname").val()
				let sgrade = $("#sgrade").val()
				console.log(sno,sname,sgrade)
				querylike(sno,sname,sgrade)
			}
			function querylike(sno,sname,sgrade){
				$.ajax({
					url: '/querylike', //目标URL
					type: 'POST',
					// 请求类型，这里是GET
					data: {
						"sno": sno, // 发送到服务器的数据
						"sname":sname,
						"sgrade":sgrade
					},
					dataType:"json",
					success: function(response) {
						//请求成功时的回调函数
						//清空内容
						$("tbody").empty();
						let index = 1;
						for(var i=0;i<response.length;i++){
							let s = "<tr><th scope='row'>"+index+++"</th>";
							s+="<td>"+response[i]["sno"]+"</td>";
							s+="<td>"+response[i]["sname"]+"</td>";
							s+="<td>"+response[i]["sgrade"]+"</td>";
							s+="<td>";
							s+="<button class='btn btn-sm btn-danger delete' sno='"+response[i]["sno"]+"'>删除</button>"
							s+="</td></tr>";
							$("tbody").append(s);
						}
						$(".delete").click(function(e){
						let sno = e.target.getAttribute("sno");
						console.log(sno)
						deletestudent(sno)
					})
						console.log(response);
					},
					error: function(xhr, status, error) {
						//请求失败时的回调函数
						console.error(error);
					}
				});
			}
			//注册add的提交事件
			document.querySelector("#addStudent").onsubmit = function(e){
				e.preventDefault();
				//读取填入的表单内容
				let sno = $("#xzsno").val()
				let sname = $("#xzsname").val()
				let sgrade = $("#xzsgrade").val()
				console.log(sno,sname,sgrade)
				addStudent(sno,sname,sgrade)
			}
			//新增函数
			function addStudent(sno,sname,sgrade){
				$.ajax({
					url: '/addstudent', //目标URL
					type: 'POST',
					// 请求类型，这里是GET
					data: {
						"sno": sno, // 发送到服务器的数据
						"sname":sname,
						"sgrade":sgrade
					},
					dataType:"json",
					success: function(response) {
						//请求成功时的回调函数
						if(response["code"]==0){
							alert("插入学生信息失败")
						}else{
							alert("插入"+response["code"]+"条信息")
							$("#closeMsg").click();
							queryall();
						}
						//需要显示是否新增成功
						console.log(response);
					},
					error: function(xhr, status, error) {
						//请求失败时的回调函数
						console.error(error);
					}
				});
			}
			//删除函数
			function deletestudent(sno){
				$.ajax({
					url: '/deletestudent', //目标URL
					type: 'POST',
					// 请求类型，这里是GET
					data: {
						"sno": sno, // 发送到服务器的数据
					},
					dataType:"json",
					success: function(response) {
						//请求成功时的回调函数
						if(response["code"]==0){
							alert("删除学生信息失败")
						}else{
							alert("删除"+response["code"]+"条信息")
							queryall();
						}
						//需要显示是否新增成功
						console.log(response);
					},
					error: function(xhr, status, error) {
						//请求失败时的回调函数
						console.error(error);
					}
				});
			}
		</script>
	</body>
</html>